<template>
  <div class="bind-agentNo">
    <van-nav-bar title="注销" left-arrow @click-left="onClickLeft" />
    <div class="login-body">
      <van-cell-group>
        <van-field
          v-model="mobileNo"
          clearable
          required
          type="number"
          label="手机号"
          placeholder="请输入手机号码"
          maxlength="11"
          left-icon="phone"
        />
        <van-field
          v-model="verCode"
          clearable
          required
          label="短信验证码"
          placeholder="请输入短信验证码"
          maxlength="10"
          left-icon="aim"
        >
          <div class="code-operate" slot="button" @click="getCode">
            <span :class="{gray:countDownSecond >= 0}">{{codeText}}</span>
          </div>
        </van-field>
      </van-cell-group>
      <div class="main-btn" @click="userCancell">确定</div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { setToken } from "@/utils/auth";
import { NavBar, Icon } from "vant";
import { CellGroup, Field, Toast } from "vant";
import { mapState, mapActions } from "vuex";
import { removeToken } from '@/utils/auth'

Vue.use(CellGroup)
  .use(Field)
  .use(Icon)
  .use(NavBar);
const aweixin = null;
export default {
  data() {
    return {
      agentNo: "",
      mobileNo: "",
      verCode: "",
      countDownSecond: -1,
      codeText: "获取验证码",
      codeTimer: null,
      isShowInvitation: this.$route.query.isShowInvitation
    };
  },
  mounted() {
    console.log(111);

    this.getUserInfo();
  },
  computed: {
    ...mapState("user", {
      beforePath: state => state.beforePath
    })
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    jumpLink(path, query) {
      this.$router.push({ path, query });
    },
    getCode() {
      if (this.countDownSecond > 0) {
        return;
      }
      if (!new RegExp("^1[0-9]{10}$").test(this.mobileNo)) {
        Toast("请填写正确的手机号码");
        return;
      }
      this.getCodeReq(); //获取验证码
    },
    /**
     * 验证码倒计时方法
     */
    timeCountDown() {
      this.codeText = "重新获取(60s)";
      var timer = 60000;
      this.countDownSecond = timer / 1000;
      this.codeTimer = setInterval(() => {
        timer -= 1000;
        if (timer <= 0) {
          clearInterval(this.codeTimer);
          this.codeText = "重新获取";
          this.countDownSecond = -1;
        } else {
          this.countDownSecond = timer / 1000;
          this.codeText = "重新获取(" + this.countDownSecond + "s)";
        }
      }, 1000);
    },
    /**
     * 清除倒计时相关数据
     */
    clearTimeCount() {
      clearInterval(this.codeTimer);
      this.codeText = "重新获取";
      this.countDownSecond = -1;
    },
    /**
     * 获取验证码接口
     */
    getCodeReq() {
      const params = { mobile: this.mobileNo };
      //手机号输入正确，才能获取验证码
      this.$http
        .post("/authCode/getUpdateCode", params)
        .then(res => {
          Toast("已发送验证码");
          this.timeCountDown();
        })
        .catch(error => {
          Toast(error.message);
        });
    },
    userCancell() {
      if (this.mobileNo == "") {
        Toast("请输入手机号码");
        return;
      }
      if (!new RegExp("^1[0-9]{10}$").test(this.mobileNo)) {
        Toast("请填写正确的手机号码");
        return;
      }
      if (!this.verCode) {
        Toast("请填写验证码");
        return;
      }
      this.$http
        .post("/user/cancell", {
          verCode: this.verCode,
          mobile: this.mobileNo
        })
        .then(res => {
        removeToken() 
          sync.disconnect()
          this.$store.commit('user/SET_LOGOUT')
          this.$router.push("/login");
          this.$store.commit("user/SET_BEFOREPATH", '/main/home');
        })
        .catch(error => {
          Toast(error.message);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.bind-agentNo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  .login-body {
    .van-cell-group {
      overflow: hidden;
    }
    .main-btn {
      margin: 30px auto;
      width: 86%;
      height: 40px;
      color: #fff;
      background: $red;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
    }
    .code-operate {
      color: $red;
      .gray {
        color: #ccc;
      }
    }
  }
}
</style>